<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="calendar">
        <title>Configuration, methods and events of Kendo UI Calendar</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="Find out how to successfully configure calendar UI component, how to use methods to get the max value of the calendar and navigate easily.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/ui/calendar.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/ui/calendar.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendouicalendar"><a href="#kendouicalendar">kendo.ui.Calendar</a></h1>

<p>Represents the Kendo UI Calendar widget. Inherits from <a href="/api/javascript/ui/widget">Widget</a>.</p>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-culture">
<a href="#configuration-culture">culture </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "en-US")</em>
</h3>

<p>Specifies the culture info used by the widget.</p>

<h4>Example - specify German culture internationalization</h4>

<pre><code>&lt;!--
    TODO: Add the kendo.culture.de-DE.min.js file as it is required!

    Here is a sample script tag:
    &lt;script src="http://kendo.cdn.telerik.com/{kendo version}/js/cultures/kendo.culture.de-DE.min.js"&gt;&lt;/script&gt;

    For more information check this help topic:
    http://docs.telerik.com/kendo-ui/framework/globalization/overview
--&gt;

&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        culture: "de-DE"
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-dates">
<a href="#configuration-dates">dates </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>
</h3>

<p>Specifies a list of dates, which will be passed to the month template.</p>

<h4>Example - specify a list of dates</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        value: new Date(2000, 10, 1),
        dates: [
            new Date(2000, 10, 10, 10, 0, 0),
            new Date(2000, 10, 10, 30, 0)
        ] //can manipulate month template depending on this array.
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-depth">
<a href="#configuration-depth">depth </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>Specifies the navigation depth. The following
settings are available for the <strong>depth</strong> value:</p>

<ul>
<li>
<code>"month"</code> - Shows the days of the month.</li>
<li>
<code>"year"</code> - Shows the months of the year.</li>
<li>
<code>"decade"</code> - Shows the years of the decade.</li>
<li>
<code>"century"</code> - Shows the decades from the century.</li>
</ul>

<blockquote>
<p>Note the option will not be applied if <strong>start</strong> option is <em>lower</em> than <strong>depth</strong>. Always set both and <strong>start</strong> and <strong>depth</strong> options.</p>
</blockquote>

<h4>Example - set navigation depth of the calendar</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        depth: "year"
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-disableDates">
<a href="#configuration-disableDates">disableDates </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a> <em>(default: null)</em>
</h3>

<p>An array or function that will be used to determine which dates to be disabled in the calendar.</p>

<h4>Example - specify an array of days to be disabled</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
$("#calendar").kendoCalendar({
    value: new Date(),
    disableDates: ["we", "th"],
});
&lt;/script&gt;
</code></pre>

<h4>Example - specify an array of dates to be disabled</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
$("#calendar").kendoCalendar({
    value: new Date(2015,9,3),
    disableDates: [new Date(2015,9,12), new Date(2015,9,22)]
});
&lt;/script&gt;
</code></pre>

<p>you can also pass a function that will be dynamically resolved for each date of the calendar. Note that when the function returns true, the date will be disabled.</p>

<h4>Example - use a function to disabled dates</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
$("#calendar").kendoCalendar({
    value: new Date(),
    disableDates: function (date) {
        var disabled = [13,14,20,21];
        if (date &amp;&amp; disabled.indexOf(date.getDate()) &gt; -1 ) {
            return true;
        } else {
            return false;
        }
    }
});
&lt;/script&gt;
</code></pre>

<p>note that a check for an empty <code>date</code> is needed, as the widget can work with a null value as well.</p>

<blockquote>
<p>This functionality was added with the Q1 release of 2016.</p>
</blockquote>

<h3 id="configuration-footer">
<a href="#configuration-footer">footer </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function" class="type-link"><code>Function</code></a>
</h3>

<p>The <a href="/api/javascript/kendo#methods-template">template</a> which renders the footer. If false, the footer will not be rendered.</p>

<h4>Example - specify footer template as a function</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script id="footer-template" type="text/x-kendo-template"&gt;
    Today - #: kendo.toString(data, "d") #
&lt;/script&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        footer: kendo.template($("#footer-template").html())
    });
&lt;/script&gt;
</code></pre>

<h4>Example - specify footer template as a string</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        footer: "Today - #: kendo.toString(data, 'd') #"
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-format">
<a href="#configuration-format">format </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "M/d/yyyy")</em>
</h3>

<p>Specifies the format, which is used to parse value set with value() method.</p>

<h4>Example - specify a custom date format</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        format: "yyyy/MM/dd"
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-max">
<a href="#configuration-max">max </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a><em>(default: Date(2099, 11, 31))</em>
</h3>

<p>Specifies the maximum date, which the calendar can show.</p>

<h4>Example - specify the maximum date</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        max: new Date(2013, 0, 1) // set the max date to Jan 1st, 2013
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-messages">
<a href="#configuration-messages">messages </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Allows localization of the strings that are used in the widget.</p>

<h4>Example</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
$("#calendar").kendoCalendar({
    "weekNumber": true,
    "messages": {
        "weekColumnHeader": "W"
    }
 })
&lt;/script&gt;
</code></pre>

<h3 id="configuration-messages.weekColumnHeader">
<a href="#configuration-messages.weekColumnHeader">messages.weekColumnHeader </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a> <em>(default: "")</em>
</h3>

<p>Allows customization of the week column header text. Set the value to make the widget compliant with web accessibility standards.</p>

<h4>Example</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
$("#calendar").kendoCalendar({
    "weekNumber": true,
    "messages": {
        "weekColumnHeader": "W"
    }
 })
&lt;/script&gt;
</code></pre>

<h3 id="configuration-min">
<a href="#configuration-min">min </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a><em>(default: Date(1900, 0, 1))</em>
</h3>

<p>Specifies the minimum date, which the calendar can show.</p>

<h4>Example - specify the minimum date</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    // set the min date to Jan 1st, 2011
    $("#calendar").kendoCalendar({
        min: new Date(2011, 0, 1)
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-month">
<a href="#configuration-month">month </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>Templates for the cells rendered in "month" view.</p>

<h3 id="configuration-month.content">
<a href="#configuration-month.content">month.content </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The template to be used for rendering the cells in "month" view, which are between the min/max range.
 By default, the widget renders the value of the corresponding day.</p>

<h4>Example - specify cell template as a string</h4>

<pre><code>&lt;style&gt;
  .exhibition{
    background-color: #9DD0E0;
    color:black;
  }
  .party{
    color: red;
    background-color: #ccc;
  }
&lt;/style&gt;
&lt;body&gt;

&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script id="cell-template" type="text/x-kendo-template"&gt;
    &lt;div class="#= data.value &lt; 10 ? 'exhibition' : 'party' #"&gt;
    #= data.value #
  &lt;/div&gt;
&lt;/script&gt;
&lt;script&gt;
  $("#calendar").kendoCalendar({
    month: {
      content: $("#cell-template").html()
    }
  });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-month.weekNumber">
<a href="#configuration-month.weekNumber">month.weekNumber </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The template to be used for rendering the cells in "week" column. By default, the widget renders the calculated week of the year. 
 The properties available in the data object are:</p>

<ul>
<li>currentDate - returns the first date of the current week.</li>
<li>
<p>weekNumber - calculated week number.</p>

<p>These properties can be used in the template to make additional calculations. </p>
</li>
</ul>

<h4>Example - specify week number template as a string</h4>

<pre><code>&lt;style&gt;
  .italic{
    font-style: italic;
  }
&lt;/style&gt;
&lt;body&gt;

&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script id="week-template" type="text/x-kendo-template"&gt;
   &lt;a class="italic"&gt;#= data.weekNumber #&lt;/a&gt;
&lt;/script&gt;
&lt;script&gt;
  $("#calendar").kendoCalendar({
    weekNumber: true,
    month: {
      weekNumber: $("#week-template").html()
    }
  });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-month.empty">
<a href="#configuration-month.empty">month.empty </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The template to be used for rendering the cells in the "month" view, which are not in the min/max range.
 By default, the widget renders an empty string.</p>

<h4>Example - specify an empty cell template as a string</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        month: {
           empty: '-'
        }
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-selectable">
<a href="#configuration-selectable">selectable </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>  <em>(default: "single")</em>
</h3>

<p>By default user is able to select a single date. The property can also be set to "multiple" in order the multiple  date selection to be enabled. More information about multiple selection can be found in the <a href="/controls/scheduling/calendar/overview#selection">Selection</a> article.  </p>

<h4>Example - enable the multiple selection</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        selectable: "multiple"
    });
&lt;/script&gt;
</code></pre>

<blockquote>
<p>Check <a href="http://demos.telerik.com/kendo-ui/calendar/selection">Selection</a> for a live demo.</p>
</blockquote>

<h3 id="configuration-selectDates">
<a href="#configuration-selectDates">selectDates </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array" class="type-link"><code>Array</code></a>  <em>(default: [])</em>
</h3>

<p>Specifies which dates to be selected when the calendar is initialized. </p>

<blockquote>
<p><strong>Important:</strong> This configuration option requires the <a href="/api/javascript/ui/calendar#configuration-selectable">selectable</a>: "multiple" option to be set.</p>
</blockquote>

<h4>Example - set two dates to be selected upon calendar initialization</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
       selectDates: [new Date(2013, 10, 10), new Date(2015, 10, 10)]
    });
&lt;/script&gt;
</code></pre>

<blockquote>
<p>Check <a href="http://demos.telerik.com/kendo-ui/calendar/selection">Selection</a> for a live demo.</p>
</blockquote>

<h3 id="configuration-weekNumber">
<a href="#configuration-weekNumber">weekNumber </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h3>

<p>If set to <code>true</code> a week of the year will be shown on the left side of the calendar.  </p>

<h4>Example - enable the week of the year option</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        weekNumber: true
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-start">
<a href="#configuration-start">start </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a><em>(default: "month")</em>
</h3>

<p>Specifies the start view.
The following settings are available for the <strong>start</strong> value:</p>

<ul>
<li>
<code>"month"</code> - Shows the days of the month.</li>
<li>
<code>"year"</code> - Shows the months of the year.</li>
<li>
<code>"decade"</code> - Shows the years of the decade.</li>
<li>
<code>"century"</code> - Shows the decades from the century.</li>
</ul>

<h4>Example - specify the initial view, which calendar renders</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        start: "year"
    });
&lt;/script&gt;
</code></pre>

<h3 id="configuration-value">
<a href="#configuration-value">value </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a><em>(default: null)</em>
</h3>

<p>Specifies the selected date.</p>

<h4>Example - specify the selected value of the widget</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        value: new Date(2012, 0, 1)
    });
&lt;/script&gt;
</code></pre>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-current"><a href="#methods-current">current</a></h3>

<p>Gets currently focused date.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a> The current focused date shown in the calendar.</p>

<h4>Example</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var calendar = $("#calendar").data("kendoCalendar");

    var current = calendar.current(); //will be today, because value is `null`
&lt;/script&gt;
</code></pre>

<h3 id="methods-destroy"><a href="#methods-destroy">destroy</a></h3>

<p>Prepares the <strong>Calendar</strong> for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.</p>

<blockquote>
<p><strong>Important:</strong> This method does not remove the Calendar element from DOM.</p>
</blockquote>

<h4>Example</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var calendar = $("#calendar").data("kendoCalendar");

    calendar.destroy();
&lt;/script&gt;
</code></pre>

<h3 id="methods-max"><a href="#methods-max">max</a></h3>

<p>Gets/Sets the max value of the calendar.</p>

<h4>Parameters</h4>

<h5>value <code>Date  |</code><code> String</code>
</h5>

<p>The max date to set.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a> The max value of the calendar.</p>

<h4>Example - get the max value of the calendar</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var calendar = $("#calendar").data("kendoCalendar");

    var max = calendar.max();
&lt;/script&gt;
</code></pre>

<h4>Example - set the max value of the calendar</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var calendar = $("#calendar").data("kendoCalendar");

    calendar.max(new Date(2100, 0, 1));
&lt;/script&gt;
</code></pre>

<h3 id="methods-min"><a href="#methods-min">min</a></h3>

<p>Gets/Sets the min value of the calendar.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The min date to set.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a> The min value of the calendar.</p>

<h4>Example - get the min value of the calendar</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var calendar = $("#calendar").data("kendoCalendar");

    var min = calendar.min();
&lt;/script&gt;
</code></pre>

<h4>Example - set the min value of the calendar</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var calendar = $("#calendar").data("kendoCalendar");

    calendar.min(new Date(1900, 0, 1));
&lt;/script&gt;
</code></pre>

<h3 id="methods-navigate"><a href="#methods-navigate">navigate</a></h3>

<p>Navigates to view.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a>
</h5>

<p>Desired date.</p>

<h5>view <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>Desired view.</p>

<h4>Example</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var calendar = $("#calendar").data("kendoCalendar");

    calendar.navigate(new Date(2012, 0, 1), "year");
&lt;/script&gt;
</code></pre>

<h3 id="methods-navigateDown"><a href="#methods-navigateDown">navigateDown</a></h3>

<p>Navigates to the lower view.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a>
</h5>

<p>Desired date.</p>

<h4>Example</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var calendar = $("#calendar").data("kendoCalendar");

    calendar.navigateDown(new Date(2012, 0, 1));
&lt;/script&gt;
</code></pre>

<h3 id="methods-navigateToFuture"><a href="#methods-navigateToFuture">navigateToFuture</a></h3>

<p>Navigates to the future.</p>

<h4>Example</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var calendar = $("#calendar").data("kendoCalendar");

    calendar.navigateToFuture();
&lt;/script&gt;
</code></pre>

<h3 id="methods-navigateToPast"><a href="#methods-navigateToPast">navigateToPast</a></h3>

<p>Navigates to the past.</p>

<h4>Example</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var calendar = $("#calendar").data("kendoCalendar");

    calendar.navigateToPast();
&lt;/script&gt;
</code></pre>

<h3 id="methods-navigateUp"><a href="#methods-navigateUp">navigateUp</a></h3>

<p>Navigates to the upper view.</p>

<h4>Example</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var calendar = $("#calendar").data("kendoCalendar");

    calendar.navigateUp();
&lt;/script&gt;
</code></pre>

<h3 id="methods-selectDates"><a href="#methods-selectDates">selectDates</a></h3>

<p>Gets/Sets the selected dates for the calendar.</p>

<blockquote>
<p><strong>Important:</strong> This method requires the <a href="/api/javascript/ui/calendar#configuration-selectable">selectable</a>: "multiple" option to be set.</p>
</blockquote>

<h4>Example - gets the selected dates of the widget</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        selectDates: [new Date(2013, 10, 10), new Date(2015, 10, 10)],
        selectable: "multiple"
    });

    var calendar = $("#calendar").data("kendoCalendar");

    var value = calendar.selectDates();
&lt;/script&gt;
</code></pre>

<h4>Example - sets the value of the widget</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        selectDates: [new Date(2013, 10, 10), new Date(2015, 10, 10)],
        selectable: "multiple"
    });

    var calendar = $("#calendar").data("kendoCalendar");

    calendar.selectDates([new Date(2016, 10,10), new Date()]);
&lt;/script&gt;
</code></pre>

<h3 id="methods-value"><a href="#methods-value">value</a></h3>

<p>Gets/Sets the value of the calendar.</p>

<h4>Parameters</h4>

<h5>value <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date |</code></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The date to set.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date" class="type-link"><code>Date</code></a> The value of the calendar.</p>

<h4>Example - gets the value of the widget</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        value: new Date(2013, 10, 10)
    });

    var calendar = $("#calendar").data("kendoCalendar");

    var value = calendar.value();
&lt;/script&gt;
</code></pre>

<h4>Example - sets the value of the widget</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        value: new Date(2013, 10, 10)
    });

    var calendar = $("#calendar").data("kendoCalendar");

    calendar.value(new Date());
&lt;/script&gt;
</code></pre>

<h3 id="methods-view"><a href="#methods-view">view</a></h3>

<p>Gets an instance of the current view used by the calendar.</p>

<h4>Returns</h4>

<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> The instance of the current view used by the calendar.</p>

<h4>Example</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var calendar = $("#calendar").data("kendoCalendar");

    var view = calendar.view();
&lt;/script&gt;
</code></pre>

<h2 id="events"><a href="#events">Events</a></h2>

<h3 id="events-change"><a href="#events-change">change</a></h3>

<p>Fires when the selected date is changed.</p>

<h4>Example - subscribe to the "change" event during initialization</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        change: function() {
            var value = this.value();
            console.log(value); //value is the selected date in the calendar
        }
    });
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to the "change" event after initialization</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var calendar = $("#calendar").data("kendoCalendar");

    calendar.bind("change", function() {
        var value = this.value();
        console.log(value); //value is the selected date in the calendar
    });
&lt;/script&gt;
</code></pre>

<h3 id="events-navigate"><a href="#events-navigate">navigate</a></h3>

<p>Fires when calendar navigates.</p>

<h4>Example - subscribe to the "navigate" event during initialization</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar({
        navigate: function() {
            var view = this.view();
            console.log(view.name); //name of the current view

            var current = this.current();
            console.log(current); //currently focused date
        }
    });
&lt;/script&gt;
</code></pre>

<h4>Example - subscribe to the "navigate" event after initialization</h4>

<pre><code>&lt;div id="calendar"&gt;&lt;/div&gt;
&lt;script&gt;
    $("#calendar").kendoCalendar();

    var calendar = $("#calendar").data("kendoCalendar");

    calendar.bind("navigate", function() {
        var view = this.view();
        console.log(view.name); //name of the current view

        var current = this.current();
        console.log(current); //currently focused date
    });
&lt;/script&gt;
</code></pre> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

